<template>
  <div class="body">
    <!-- 课程提醒  -->
    <!-- <div class="header">
      <div>
        <img @click="returnGo" src="../../assets/homeimg/滑动左.png" />
        <span>课程提醒</span>
      </div>
    </div> -->
    <div class="min">
      <div class="kgde">
        <p class="kcname">
          <span class="name">上课提醒</span>
          <van-switch
            v-model="checked"
            active-color="#FFB007"
            inactive-color="#ffffff"
            size="24px"
            @input="onInput"
          />
        </p>
        <p class="jiyi">关闭后，每天将不再收到上课提醒</p>
        <div class="bot" @click="pop">
          <div class="left">
            <img src alt />
            <span>设置每天提醒时间</span>
          </div>
          <div class="right">
            <span>{{currentTime}}</span>
            <img class="jiantou" src="../../assets/homeimg/滑动右.png" alt />
          </div>
        </div>
        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
          <van-datetime-picker v-model="currentTime" type="time" @confirm	="submit" @cancel='cancel' :min-hour="0" :max-hour="24" />
        </van-popup>
        <!-- <van-datetime-picker
          v-model="currentTime"
          type="time"
          title="选择时间"
          :min-hour="10"
          :max-hour="20"
        /> -->
      </div>
    </div>
  </div>
</template>
<script>
import { Toast, Dialog } from 'vant';
export default {
  data() {
    return {
      checked: false,
      show: false,
      currentTime:'08:00'
    };
  },
  components: {
    // [Image.name]: Image
  },
  mounted() {
    // Toast(this.$route.query.time)
    if(this.$route.query.isOpne == 0){
      this.checked = false;
    }else{
      this.checked = true;
    }
    if(this.$route.query.time){
      this.currentTime = this.$route.query.time
    }
  },
  methods: {
    returnGo() {
      // this.$router.push("/mycourses");
      window.h5_android && window.h5_android.reback();
      window.webkit.messageHandlers.pageBack_js_oc.postMessage([])
    },
    onInput(checked){
      // console.log(checked,this.currentTime)
      let data = {
        switch: checked,
        time: this.currentTime
      }
      window.h5_android && window.h5_android.setRemind(JSON.stringify(data));
      window.webkit.messageHandlers.setCourseRemind_js.postMessage([checked,this.currentTime])
    },
    //弹出时间选择器
    pop() {
      this.show = true;
    },
    submit(value){
      // console.log(value);
      this.currentTime = value;
      this.show = false;
      let data = {
        switch: this.checked,
        time: this.currentTime
      };
      console.log(data)
      window.h5_android && window.h5_android.setRemind(JSON.stringify(data));
      window.webkit.messageHandlers.setCourseRemind_js.postMessage([this.checked,this.currentTime])
    },
    cancel(){
      this.show = false;
    }
  }
};
</script>
<style lang="scss" scoped="scoped">
.body {
  color: #333333;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}
.header {
  // font-weight: bold;
  width: 100%;
  text-align: center;
  height: 2.75rem;
  line-height: 2.75rem;
  padding-top: 1.25rem;
  position: relative;
  border-bottom: 1px solid #dcdcdc;
  color: #333333;
  font-size: 1.25rem;
  img {
    width: 0.625rem;
    height: 1.125rem;
    position: absolute;
    left: 1rem;
    bottom: 0.75rem;
  }
}
// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);

		}

	}
.kgde {
  margin: 0 auto;
  width: 92vw;
  height: 6.75rem;
  background: #fff;
  padding: 0 0.75rem;
  padding-top: 0.625rem;
  margin-top: 0.9375rem;
}
.kcname {
  display: flex;
  justify-content: space-between;
}
.name {
  color: #333333;
  font-size: 1rem;
  font-weight: bold;
}
.jiyi {
  color: #999999;
  font-size: 0.75rem;
  height: 30px;
  line-height: 1.5625rem;
  border-bottom: 1px solid #dcdcdc;
}
.chakan {
  display: flex;
  justify-content: space-between;
  color: #999999;
  font-size: 0.75rem;
  height: 1.25rem;
  line-height: 1.25rem;
  span:nth-of-type(2) {
    display: inline-block;
    text-align: center;
    width: 4.375rem;
    height: 1.5rem;
    background: #fafafa;
    border-radius: 0.75rem;
  }
}
.bot {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 0.625rem;
  .left {
    display: flex;
    span {
      font-size: 0.75rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      line-height: 1.875rem;
    }
  }
  .right {
    display: flex;
    span {
      font-size: 0.75rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      line-height: 1.875rem;
    }
    .jiantou {
      display: block;
      width: 0.375rem;
      height: 0.625rem;
      margin-top: 10px;
      margin-left: 0.5rem;
    }
  }
}
.pinfen img {
  width: 1rem;
  height: 0.9375rem;
  margin: 0 0.1875rem;
}
</style>
